import React, { Component } from 'react';
import { observable } from 'mobx';
import { observer, inject } from "mobx-react";
import PropTypes from 'prop-types';
import moment from 'moment';
import TabTitle from '@/components/TabTitle/TabTitle';
import User from './components/User'

@inject('rootStore') @observer
class HistoryList extends Component {
  @observable tabKey = 1;
  @observable filterParam = {
    accountNo: '',
    mobile: '',
    time: ''
  }
  @observable categoryActiveItem = ""
  @observable categoryStatus = true
  @observable canFetch = true

  state = {
    timeValue: [],
  }

  componentDidMount() {
    document.getElementsByClassName('ant-layout-content')[0].scrollTop = 0

    this.toGetList();
  }

  toGetList = () => {
    const userStore = this.props.rootStore.userStore;

    userStore.toGetUserList();
  }

  filterBarSearch = () => {
    const userStore = this.props.rootStore.userStore;
    userStore.filterParamSearch(this.filterParam);
  }

  nameValueOnChange = (e) => {
    this.filterParam.accountNo = e.target.value;
  }

  timeOnChange = (value) => {
    this.filterParam.startTime = moment(value[0]).format();
    this.filterParam.endTime = moment(value[1]).format();
  }

  timeChange = (value, dateString) => {
    this.setState({
      timeValue: value
    })
  }

  phoneValueOnChange = (e) => {
    this.filterParam.mobile = e.target.value
  }

  filterBarReset = () => {
    const userStore = this.props.rootStore.userStore;
    this.filterParam.accountNo = '';
    this.filterParam.mobile = '';
    this.filterParam.startTime = '';
    this.filterParam.endTime = '';

    this.setState({
      timeValue: []
    })

    userStore.filterParamSearch(this.filterParam);
  }

  static propTypes = {
    history: PropTypes.object.isRequired
  }

  render() {
    const breadCrumb = ['User', 'User List']

    return (
      <div className="news-list">
        <TabTitle
          showTabbar={true}
          title="User List"
          breadCrumb={breadCrumb} />
        <User
          {...this.props}
          filterBarSearch={this.filterBarSearch}
          nameValueOnChange={this.nameValueOnChange}
          nameValue={this.filterParam.accountNo}
          timeOnChange={this.timeOnChange}
          timeChange={this.timeChange}
          timeValue={this.state.timeValue}
          phoneValue={this.filterParam.mobile}
          phoneValueOnChange={this.phoneValueOnChange}
          filterBarReset={this.filterBarReset} />
      </div>
    );
  }
}

export default HistoryList;
